<template>
  <div class="index-tpl">
    <div class="tpl-column-header">
      <div style="flex:1;text-align:left;">
        <a-input v-model="tplInfo.title" style="width:222px;" size="small" placeholder="显示标题" />
      </div>
    </div>
    <div class="tpl-column" ref="main_box">
      <draggable :list="content.list" :options="{ group: 'list', animation: 150 }" :on-update="updateList"
        :style="{ backgroundImage: 'url(' + content.bg_img + ')'}" class="tpl-column-content">


          <div v-for="(item, index) in content.list" :key="index" class="tpl-item"
               :style="{width:item.type === '18' ? '50%' : '100%',  display: 'inline-flex',  verticalAlign: 'top' }">
            <div :class="`${'tpl-item-box'} ${item.type == '5' ? 'tpl-nav-item-box' : ''}`"
                 :style="{ marginTop: item.top + 'px', marginBottom: item.bottom + 'px', paddingLeft: item.left + 'px', paddingRight: item.right + 'px' }">
              <div v-if="item.type != 2 && item.type != 4  && item.type != 18 && item.type != 10"
                   :class="`tpl-item-box1 ${item.type == '5' ? 'tpl-nav-box' : ''}`">
                <div v-for="(item1, index1) in item.floor_data" :key="index1"
                     :class="`item-box-item ${item1.type == 13 || !item1.type ? 'item-nav-item' : ''}`">
                  <img v-if="item1.img_url" :src="item1.img_url">
                  <div v-if="item1.type == 13" class="nav-title">{{item1.imgtit}}</div>
                  <div
                    v-if="!item1.img_url && item.type != 1 && item.type != 3 && item.type != 6 && item.type != 7
                  && item.type != 8 && item.type != 9 && item.type != 10 && item.type != 11 && item.type != 12
                   && item.type != 13 && item.type != 14 && item.type != 15 && item.type != 16 && item.type != 18"
                    class="no-img">
                    未配置
                  </div>
                  <div v-if="!item1.img_url && item.type == 3" class="no-img notice">
                    <span>公告栏</span>
                  </div>
                  <div v-if="item.type == 6" class="no-img hot-goods">
                    <span>热门商品</span>
                  </div>
                  <div v-if="item.type == 7" class="no-img new-goods">
                    <span>新品推荐</span>
                  </div>
                  <div v-if="item.type == 8" class="no-img shop">
                    <span>推荐店铺</span>
                  </div>
                  <div v-if="item.type == 9" class="no-img spike">
                    <span>秒杀板块</span>
                  </div>
                  <div v-if="item.type == 12" class="no-img spike2">
                    <span>团购板块</span>
                  </div>
                  <div v-if="item.type == 13" class="no-img spike1">
                    <span>秒杀横向</span>
                  </div>
                  <div v-if="item.type == 14" class="no-img spike3">
                    <span>团购横向</span>
                  </div>
                  <div v-if="item.type == 15" class="no-img spike1">
                    <span>砍价专区</span>
                  </div>
                  <div v-if="item.type == 16" class="no-img spike1">
                    <span>砍价横向</span>
                  </div>
                  <div v-if="item.type == 11" class="no-img coupon">
                    <span>优惠券</span>
                  </div>
                  <div v-if="!item1.img_url && item.type == 1" class="search-bar">
                    <div style="flex:1;">
                      <a-input style="width:100%;border-radius: 20px;" placeholder="请输入内容" />
                    </div>
                    <div style="padding-left:15px;">
                      <a-button size="small" icon="dash" />
                    </div>
                  </div>
                </div>
              </div>
              <a-carousel v-if="item.type == 2" style="height:150px;" :dots="false">
                <div v-for="(item3, index3) in item.floor_data" :key="index3">
                  <div v-if="item3.img_url" :style="{ backgroundImage: 'url(' + item3.img_url + ')' }"
                       style="width:100%;height:150px;background-position: center center;background-size: cover;" />
                  <div v-if="!item3.img_url" class="no-img">
                    未配置
                  </div>
                </div>
              </a-carousel>

              <div v-if="item.type == 18" class="tpl-item-box1">
                <div v-for="(item1, index1) in item.floor_data" :key="index1" class="item-box-item">
                  <img v-if="item1.img_url" :src="item1.img_url">
                  <div v-if="item1.img_url" class="c-text">{{ item1.title }}</div>
                  <div
                    v-if="!item1.img_url && item.type != 1 && item.type != 3 && item.type != 6 && item.type != 7 && item.type != 8"
                    class="no-img">
                    未配置
                  </div>
                </div>
              </div>

              <div v-if="item.type == 4" class="tpl-item-box2">
                <div v-for="(item1, index1) in item.floor_data" :key="index1" class="item-box-item">
                  <img v-if="item1.img_url" :src="item1.img_url">
                  <div v-if="item1.img_url" class="c-text">{{ item1.title }}</div>
                  <div
                    v-if="!item1.img_url && item.type != 1 && item.type != 3 && item.type != 6 && item.type != 7 && item.type != 8"
                    class="no-img">
                    未配置
                  </div>
                </div>
              </div>

              <div v-if="item.type == 10" class="tpl-item-box1">
                <div class="item-box-item">
                  <div v-if="item.type == 10" class="no-img vae">
                    <span>自定义商品列表</span>
                  </div>
                </div>
              </div>
              <!--              :style="item.type === '18' ? 'width:50%' : 'width:100%'"-->
              <div :class="item.active? 'f-block' :'' " class="box-tool" >
                <div class="box-tool-panel" @click="openThisFloor(index)">
                  <div class="floor-del" @click.stop="delTpl(index)">
                    删除
                  </div>
                </div>
              </div>
            </div>
          </div>


      </draggable>
    </div>
    <div class="bg-phone"></div>
    <div class="bg-phone-right"></div>
    <div v-for="(item, index) in content.list" :key="index" class="edit-row">
      <div class="edit-panel" v-if="item.active">
        <span class="panel-close" @click="closePanel(item)">
          <a-icon type="close" />
        </span>
        <div class="one-row">
          <span v-if="item.type == 1" style="font-weight:600;color: #1f2f3d;">搜索栏配置</span>
          <span v-if="item.type == 2" style="font-weight:600;color: #1f2f3d;">轮播图配置<span
              style="color: red;">(图片尺寸推荐：750*750。每张一致。)</span></span>
          <span v-if="item.type == 3" style="font-weight:600;color: #1f2f3d;">公告配置</span>
          <span v-if="item.type == 4" style="font-weight:600;color: #1f2f3d;">分类导航配置<span
              style="color: red;">(图片尺寸推荐：120*120。每张一致。)</span></span>
          <span v-if="item.type == 5" style="font-weight:600;color: #1f2f3d;">图层配置<span
              style="color: red;">(图片尺寸推荐：每张一致。)</span></span>
          <span v-if="item.type == 6" style="font-weight:600;color: #1f2f3d;">热门商品</span>
          <span v-if="item.type == 7" style="font-weight:600;color: #1f2f3d;">新品推荐</span>
          <span v-if="item.type == 8" style="font-weight:600;color: #1f2f3d;">推荐店铺</span>
          <span v-if="item.type == 9" style="font-weight:600;color: #1f2f3d;">秒杀板块</span>
          <span v-if="item.type == 10" style="font-weight:600;color: #1f2f3d;">自定义商品列表</span>
          <span v-if="item.type == 11" style="font-weight:600;color: #1f2f3d;">优惠券</span>
          <span v-if="item.type == 12" style="font-weight:600;color: #1f2f3d;">团购专区</span>
          <span v-if="item.type == 13" style="font-weight:600;color: #1f2f3d;">秒杀横向</span>
          <span v-if="item.type == 14" style="font-weight:600;color: #1f2f3d;">团购横向</span>
          <span v-if="item.type == 15" style="font-weight:600;color: #1f2f3d;">砍价专区</span>
          <span v-if="item.type == 16" style="font-weight:600;color: #1f2f3d;">砍价横向</span>
          <span v-if="item.type == 18" style="font-weight:600;color: #1f2f3d;">并图</span>
        </div>
        <div class="one-row">
          <div class="row-col">
            <div class="col-label">
              顶部间隙
            </div>
            <div>
              <a-input-number v-model="item.top" :min="0" :max="20" style="width:110px;" size="small" label="顶部间隙" />
            </div>
          </div>
          <div class="row-col">
            <div class="col-label">
              底部间隙
            </div>
            <div>
              <a-input-number v-model="item.bottom" :min="0" :max="20" style="width:110px;" size="small" label="底部间隙" />
            </div>
          </div>

          <!-- <div class="row-col">
          <div class="col-label">
            显示等级
          </div>
          <div>
            <a-select v-model="item.show_level" style="width:120px;" size="small" placeholder="请选择">
              <a-option :key="0" :label="'全部'" :value="0"/>
              <a-option :key="1" :label="'普通用户'" :value="1"/>
              <a-option :key="2" :label="'VIP会员'" :value="2"/>
            </a-select>
          </div>
        </div> -->
        </div>
        <div class="one-row">
          <div class="row-col">
            <div class="col-label">
              分组标题
            </div>
            <div>
              <a-input v-model="item.title"  style="width:110px;" size="small" label="分组标题" />
            </div>
          </div>
          <!-- <div class="row-col">
          <div class="col-label">
            左边间隙
          </div>
          <div>
            <a-input-number v-model="item.left" :min="0" :max="20" style="width:110px;" size="small" label="顶部间隙"/>
          </div>
        </div> -->
          <!-- <div class="row-col">
          <div class="col-label">
            右边间隙
          </div>
          <div>
            <a-input-number v-model="item.right" :min="0" :max="20" style="width:110px;" size="small" label="底部间隙"/>
          </div>
        </div> -->
          <!-- <div class="row-col">
            <div class="col-label" />
            <div />
          </div> -->
        </div>
        <div
          v-if="item.type == 6 || item.type == 7 || item.type == 8 || item.type == 9 || item.type == 10 ||
           item.type == 12 || item.type == 13 || item.type == 14 || item.type == 15 || item.type == 16"
          class="two-row">
          <a-row style="line-height:32px;display:flex;">
            <span v-if="item.type != 10" style="padding-right:15px;">显示个数</span>
            <a-select v-if="item.type != 10" v-model="item.nums" style="width:110px;padding-right:15px;" size="small"
              placeholder="显示个数">
              <a-select-option :value="0">选择</a-select-option>
              <a-select-option :value="4">4</a-select-option>
              <a-select-option :value="6">6</a-select-option>
              <a-select-option :value="8">8</a-select-option>
              <a-select-option :value="10">10</a-select-option>
              <a-select-option :value="12">12</a-select-option>
              <a-select-option :value="14">14</a-select-option>
              <a-select-option :value="16">16</a-select-option>
              <a-select-option :value="18">18</a-select-option>
              <a-select-option :value="20">20</a-select-option>
            </a-select>
            <!-- <span style="padding-right:15px;">显示标题</span>
            <a-input v-model="item.title" style="width:200px;" size="small" placeholder="显示标题" /> -->
          </a-row>
        </div>
        <div
          v-if="item.type != 1 && item.type != 6 && item.type != 7 && item.type != 8 && item.type != 9
           && item.type != 10 && item.type != 11 && item.type != 12 && item.type != 13 && item.type != 14
           && item.type != 15 && item.type != 16 "
          class="two-row">
          <div v-for="(item2, index2) in item.floor_data" :key="index2" class="two-row-item">
            <div class="item-btns">
              <a-row>
                <a-button type="danger" icon="delete" size="small" shape="circle" @click="delImg(index,index2)"/>
                <a-button v-if="item.type!= 18" type="danger" icon="delete" size="small" shape="circle" @click="delImg(index, index2)" />
              </a-row>
            </div>
            <div class="item-content">
              <div v-if="item.type != 3" class="img-box">
                <j-image-upload class="avatar-uploader" :accept="'image/png,image/jpeg'"
                  @change="changeImg($event, index, index2)" text="上传" v-model="item2.img_url"></j-image-upload>
              </div>
              <div class="data-box">
                <a-row v-if="item.type == 3" style="line-height:32px;display:flex;">
                  <span style="padding-right:4px;">公告内容：</span>
                  <a-input v-model="item2.title" style="width:350px;" size="small" placeholder="公告内容"
                    @change="setTime(index, index2)" />
                </a-row>
                <a-row v-if="item.type == 4" style="line-height:32px;display:flex;">
                  <span style="padding-right:4px;">分类标题：</span>
                  <a-input v-model="item2.title" style="width:350px;" size="small" placeholder="分类标题" />
                </a-row>
                <a-row v-if="item2.type == 1 || item2.type == 15" style="line-height:34px;">
                  <span style="font-size:12px;">商品名字：{{ item2.param ? item2.title : '' }}</span>
                </a-row>
                <a-row style="line-height:34px;">
                  <span style="font-size:12px;">打开页面：</span>
                  <a-select v-model="item2.type" style="width:160px;" @change="selectLinkTyle($event, index, index2)"
                    size="small" placeholder="打开页面">
                    <a-select-option v-for="item in link_types" :key="item.id" :value="item.id">{{ item.name }}
                    </a-select-option>
                  </a-select>
                  <!-- <j-dict-select-tag style="width:160px;" :size="'small'" type="list" v-model="item2.type" :trigger-change="true"
                    @change="selectLinkTyle($event,index,index2)" dictCode="click_effect" placeholder="打开页面" /> -->
                </a-row>
                <a-row style="line-height:32px;display:flex;">
                  <span style="padding-right:4px;font-size:12px;">页面参数：</span>
                  <gospel-select :width="'300px'" :link_type="item2.link_type"
                    @change="sureNmSelect($event, index, index2)" v-model="item2.param">
                  </gospel-select>
                </a-row>
                <a-row v-if="item.type == 5" style="line-height:32px;display:flex;">
                  <span style="padding-right:4px;font-size:12px;">图片标题：</span>
                  <a-input v-model="item2.imgtit" style="width:300px;" size="small" class="input-with-select"
                    placeholder="(选填)" />
                </a-row>
              </div>
            </div>
          </div>

          <div v-if="item.floor_data.length < 11 && (item.type!=18 )" style="text-align:center;">
            <a-button type="primary" shape="circle" icon="plus" size="small" @click="addImg(index, item.type)" />
          </div>
        </div>

        <!-- 自定义商品选择 -->
        <div v-if="item.type == 10" class="two-row">
          <div v-for="(item2, index2) in item.floor_data" :key="index2" class="two-row-item">
            <div class="item-btns">
              <a-row>
                <a-button style="margin-bottom:5px;" icon="down" shape="circle" size="small"
                  @click="downImg(index, index2)" />
                <a-button style="margin-bottom:5px;" icon="up" shape="circle" size="small"
                  @click="upImg(index, index2)" />
                <a-button type="danger" icon="delete" size="small" shape="circle" @click="delImg(index, index2)" />
              </a-row>
            </div>
            <div class="item-content">
              <div class="img-box">
                <div v-if="item2.good_info.imgUrl" class="avatar-floor">
                  <img :src="item2.good_info.imgUrl" style="height:100px;">
                </div>
              </div>
              <div class="data-box">
                <a-row style="line-height:32px;display:flex;">
                  <span style="padding-right:4px;">商品名称：{{ item2.good_info.title }}</span>
                </a-row>
                <a-row style="line-height:32px;display:flex;">
                  <span style="padding-right:4px;">商品id：{{ item2.good_info.itemCode }}</span>
                </a-row>
                <a-row style="line-height:32px;display:flex;">
                  <span style="padding-right:4px;">商品价格：￥{{ item2.good_info.price }}</span>
                </a-row>
              </div>
            </div>
          </div>
          <!-- 配置自定义商品的蓝色按钮 ↓ v-if="item.floor_data.length<11"-->
          <div style="text-align:center;" v-if="item.floor_data.length < 51">
            <a-button type="primary" shape="circle" icon="plus" size="small" @click="addImg(index, item.type)" />
          </div>
        </div>

      </div>
    </div>

    <div class="f-tools">
      <div class="tool-box">
        <!-- <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small"  @click="addTpl(1)">搜索栏</a-button>
        </div> -->
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(2)">banner</a-button>
        </div>
        <!-- <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small"  @click="addTpl(3)">公告</a-button>
        </div> -->
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(4)">分类导航</a-button>
        </div>
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(5)">单(多)图</a-button>
        </div>
        <!-- <div class="tool-item">
          <a-button  type="primary" style="width:120px;" size="small"  @click="addTpl(6)">热门商品</a-button>
        </div>-->
        <!-- <div class="tool-item">
          <a-button  type="primary" style="width:120px;" size="small"  @click="addTpl(7)">新品推荐</a-button>
        </div>  -->
        <!-- <div class="tool-item">
          <a-button  type="primary" style="width:120px;" size="small"  @click="addTpl(8)">推荐店铺</a-button>
        </div> -->
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(9)">秒杀专区
          </a-button>
        </div>
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(10)">自定义商品</a-button>
        </div>
        <!-- <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(11)">优惠券</a-button>
        </div> -->
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(12)">团购专区
          </a-button>
        </div>
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(13)">秒杀横向
          </a-button>
        </div>
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(14)">团购横向
          </a-button>
        </div>
        <!-- <div class="tool-item">
          <a-button  type="primary" style="width:120px;" size="small"  @click="addTpl(15)">砍价专区</a-button>
        </div>
        <div class="tool-item">
          <a-button  type="primary" style="width:120px;" size="small"  @click="addTpl(16)">砍价横向</a-button>
        </div> -->
        <div class="tool-item">
          <a-button type="primary" style="width:120px;" size="small" @click="addTpl(18)">并图
          </a-button>
        </div>

      </div>
      <div class="tool-box">
        <div style="height:5px;flex:1;" />
        <div class="tool-item">
          <a-button type="success" style="width:120px;" size="small" round @click="saveTplInfo()">保存</a-button>
        </div>
        <div class="tool-item">
          <a-button type="warning" style="width:120px;" size="small" round @click="getTplInfo()">还原</a-button>
        </div>
        <div class="tool-item">
          <a-button type="warning" style="width:120px;" size="small" round @click="goBack()">返回列表</a-button>
        </div>
      </div>
    </div>
    <gms-good-ref ref="modalGoods" :selectionType="'checkbox'" @ok="modalGoodsOk" />
  </div>
</template>
<script>

import { postAction, getAction, putAction } from '@/api/manage'
import GospelSelect from '@/components/gospel/GospelSelect'
import baseData from '@/utils/base-data.js'
import draggable from 'vuedraggable'
import JImageUpload from '@/components/jeecg/JImageUpload'
import GmsGoodRef from '@/views/gospel/mallBase/good/modules/GmsGoodRef'
import JDictSelectTag from "@/components/dict/JDictSelectTag"

export default {
  name: 'TplEdit',
  components: {
    GospelSelect,
    draggable,
    JImageUpload,
    GmsGoodRef
  },
  data() {
    return {
      theIndex: 0,
      // link_types: baseData.link_types,
      id: null,
      headerText: '首页装修', // 模板名称
      tplInfo: {
        title: '',
        remark: '',
        content: '',
        id: ''
      },
      options: {// 拖动配置
        group: 'mission'
      },
      content: {
        bg_img: '', // 背景图片
        list: []
      },
      handCondition: {
        type: 'handCondition',//config表对应类型
        value_type: 1,//config表对应配置项数据类型1：json,2:字符串值
        configInfo: {}//config表对应配置项数据
      },
    }
  },
  computed: {
    link_types: function () {
      let self = this
      return baseData.link_types.filter(function (item) {
        if (self.handCondition.configInfo.condition == 2) {
          return item.id != 14 && item.id != 15
        } else {
          return true
        }

      })
    },
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    this.getConfig('handCondition')
    this.getTplInfo()
  },
  methods: {
    getConfig(type) {
      let that = this
      getAction("/cmsConfig/queryConfigByType", { type: type }).then((res) => {
        if (res.success) {
          if (that[type].value_type == 1) {
            that[type].configInfo = JSON.parse(res.result)
          } else if (that[type].value_type == 2) {
            that[type].configInfo = res.result
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    closePanel(item) {
      item.active = false
    },

    selectLinkTyle(e, index1, index2) {
      const self = this
      for (let i = 0; i < this.link_types.length; i++) {
        if (e == this.link_types[i].id) {
          self.content.list[index1].floor_data[index2]['link_type'] = this.link_types[i]
        }
      }
      self.content.list[index1].floor_data[index2].param = ""
    },

    updateList(d) {
      console.log(d)
    },

    goBack() {
      this.$router.go(-1)
    },


    /**
     * 选中打开楼层编辑
     * params：index(楼层位置索引)
     */
    openThisFloor(index) {
      console.log(index)
      const self = this
      for (let i = 0; i < self.content.list.length; i++) {
        self.content.list[i].active = false
      }
      self.content.list[index].active = true
    },
    /**
     * 选中打开楼层编辑
     * params：type(楼层类型)
     */
    addTpl(type) {
      const self = this
      console.log(self.content.list.length)
      for (let i = 0; i < self.content.list.length; i++) {
        self.content.list[i].active = false
      }
      const tpl_obj = {
        title: '',
        active: false, // 是否选中当前楼层（后台配置时使用，前端显示接口不使用）
        type: '', // 搜索栏：1，--  banner：2，--  公告：3，--  分类导航（一层5个）：4，--  图层（一层可1-4张）：5。（公告和搜索栏，这里只控制是否显示，展示功能前端自行实现，banner图样式自行实现）
        top: 0, // 楼层上间距
        bottom: 0, // 楼层下间距
        left: 0, // 楼层左间距
        right: 0, // 楼层右间距
        is_opacity: false, // 是否半透明（是：true，否：false）
        goods_list: [], // 热门商品新品推荐列表
        shops_list: [], // 推荐店铺列表
        nums: 10, // 商品店铺显示个数
        show_level: 0, // 显示限制：0：全部显示。1：普通用户显示。2：会员显示。
        floor_data: [// 每层显示张数
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用（占不使用）
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，-- 分类对应列表：2，-- 店铺：3，-- 热门商品列表：4，-- 新品推荐列表：5，-- 推荐店铺列表：6，-- 富文本：7，-- 外链：8，
            param: '', // 点击效果对应参数(热门商品列表：4，新品推荐列表：5，推荐店铺列表：6；没有参数)
            imgtit: '',
            link_type: {
              id: 0,
              name: '点击无效果',
              params_type: 0 //0:无参数，1:输入参数，2:选择参数
            }
          }
        ]
      }
      if (type == 1) {
        // 搜索栏
        tpl_obj.type = '1'
      } else if (type == 2) {
        // banner
        tpl_obj.type = '2'
        tpl_obj.floor_data = [
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          }
        ]
      } else if (type == 3) {
        // 公告
        tpl_obj.type = '3'
      } else if (type == 4) {
        // 分类导航
        tpl_obj.type = '4'
        tpl_obj.floor_data = [
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片s
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片s
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          }
        ]
      } else if (type == 5) {
        // 单图
        tpl_obj.type = '5'
      } else if (type == 6) {
        // 双图
        tpl_obj.type = '6'
        tpl_obj.title = '热门商品'
      } else if (type == 7) {
        // 三图
        tpl_obj.type = '7'
        tpl_obj.title = '推荐商品'
      } else if (type == 8) {
        // 四图
        tpl_obj.type = '8'
        tpl_obj.title = '推荐店铺'
      } else if (type == 9) {
        // 四图
        tpl_obj.type = '9'
        tpl_obj.title = '秒杀专区'
      } else if (type == 10) {
        // 四图
        tpl_obj.type = '10'
        tpl_obj.title = ''
        tpl_obj.floor_data = []
      } else if (type == 11) {
        tpl_obj.type = '11'
        tpl_obj.title = '优惠券'
      } else if (type == 12) {
        tpl_obj.type = '12'
        tpl_obj.title = '团购专区'
      } else if (type == 13) {
        tpl_obj.type = '13'
        tpl_obj.title = '秒杀专区'
      } else if (type == 14) {
        tpl_obj.type = '14'
        tpl_obj.title = '团购专区'
      } else if (type == 15) {
        tpl_obj.type = '15'
        tpl_obj.title = '砍价专区'
      } else if (type == 16) {
        tpl_obj.type = '16'
        tpl_obj.title = '砍价横向'
      } else if (type == 17) {
        tpl_obj.type = '17'
        tpl_obj.title = '好物推荐'
      } else if (type == 18) {
        tpl_obj.type = '18'
        tpl_obj.title = '并图'
        tpl_obj.floor_data = [
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: 0, // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          },
          {
            good_info: {}, // 商品信息
            title: '设置标题', // 分类导航需要标题时使用
            img_url: '', // 显示图片s
            img_width: 0, // 显示宽度
            img_height: 0, // 显示高度
            type: 0, // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
            param: '', // 点击效果对应参数
            imgtit: ''
          }
        ]
      }
      self.content.list.push(tpl_obj)
      setTimeout(function () {
        self.content.list[self.content.list.length - 1].active = true
        const h = document.body.scrollHeight - 1400
        window.scrollTo(0, h)
        self.$refs.main_box.scrollTop = 10000
      }, 300)
    },
    /**
     * 删除楼层
     * index(楼层索引)
     */
    delTpl(index) {
      const self = this
      console.log(index)
      self.content.list.splice(index, 1)
    },
    /**
     * 删除图片
     * index(楼层索引)
     */
    delImg(index, index1) {
      const self = this
      self.content.list[index].floor_data.splice(index1, 1)
      self.content.list[index].goods_list = []
      for (let i = 0; i < self.content.list[index].floor_data.length; i++) {
        self.content.list[index].goods_list.push(self.content.list[index].floor_data[i].good_info.itemCode)
      }
    },
    /**
     * 添加图片
     * index(楼层索引)
     */
    addImg(index, t) {
      const self = this
      if (t != 10) {
        const obj = {
          good_info: {}, // 商品信息
          title: '设置标题', // 分类导航需要标题时使用
          img_url: '', // 显示图片
          img_width: 0, // 显示宽度
          img_height: 0, // 显示高度
          type: 0, // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
          param: '' // 点击效果对应参数
        }
        self.content.list[index].floor_data.push(obj)
      } else {
        self.theIndex = index
        self.$refs.modalGoods.visible = true
        self.$refs.modalGoods.refStatus = 1;
        self.$refs.modalGoods.checkedKeys = self.content.list[index].goods_list
        self.$refs.modalGoods.checkedRows = []
        if (self.content.list[index].floor_data) {
          for (let i = 0; i < self.content.list[index].floor_data.length; i++) {
            self.$refs.modalGoods.checkedRows.push(self.content.list[index].floor_data[i].good_info)
          }
        }
        self.$refs.modalGoods.open()
      }
    },
    modalGoodsOk(rows) {
      console.log(rows)
      const self = this
      self.content.list[this.theIndex].floor_data = []
      self.content.list[this.theIndex].goods_list = []
      for (let i = 0; i < rows.length; i++) {
        console.log(rows[i].imgUrl)
        const obj = {
          good_info: {
            id: rows[i].id,
            itemCode: rows[i].itemCode,
            imgUrl: rows[i].imgUrl,
            price: rows[i].price,
            originalPrice: rows[i].originalPrice,
            stock: rows[i].stock,
            title: rows[i].title
          }, // 商品信息
          title: '设置标题', // 分类导航需要标题时使用
          img_url: '', // 显示图片
          img_width: 0, // 显示宽度
          img_height: 0, // 显示高度
          type: '0', // 点击效果类型 ——  商品：1，分类对应列表：2，店铺：3，热门商品列表：4，新品推荐列表：5，推荐店铺列表：6，富文本：7，外链：8，
          param: '' // 点击效果对应参数
        }
        self.content.list[this.theIndex].floor_data.push(obj)
        self.content.list[this.theIndex].goods_list.push(rows[i].itemCode)
      }

    },


    /**
     * 图片下移
     * index(楼层索引)
     */
    downImg(index, index1) {
      const self = this
      if (index1 == (self.content.list[index].floor_data.length - 1)) {
        return
      }
      const obj = self.content.list[index].floor_data[index1]
      const obj1 = self.content.list[index].floor_data[index1 + 1]
      self.$set(self.content.list[index].floor_data, index1, obj1)
      self.$set(self.content.list[index].floor_data, (index1 + 1), obj)

      const dd1 = self.content.list[index].goods_list[index1]
      const dd2 = self.content.list[index].goods_list[index1 + 1]
      self.$set(self.content.list[index].goods_list, index1, dd2)
      self.$set(self.content.list[index].goods_list, (index1 + 1), dd1)
    },
    setTime(index, index1) {
      const self = this
      const newDate = self.getNowDate()
      self.content.list[index].floor_data[index1].time = newDate
    },
    changeImg(e, index, index1) {
      const self = this
      var image = new Image()
      image.src = e
      image.onload = function () {
        self.content.list[index].floor_data[index1].img_width = image.width
        self.content.list[index].floor_data[index1].img_height = image.height
      }
    },
    getNowDate() {
      const date = new Date()
      const seperator1 = '-'
      // const year = date.getFullYear()
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      const currentdate = month + seperator1 + strDate
      return currentdate
    },
    /**
     * 图片上移
     * index(楼层索引)
     */
    upImg(index, index1) {
      if (index1 == 0) {
        return
      }
      const self = this
      const obj = self.content.list[index].floor_data[index1]
      const obj1 = self.content.list[index].floor_data[index1 - 1]
      self.$set(self.content.list[index].floor_data, index1, obj1)
      self.$set(self.content.list[index].floor_data, (index1 - 1), obj)

      const dd1 = self.content.list[index].goods_list[index1]
      const dd2 = self.content.list[index].goods_list[index1 - 1]
      self.$set(self.content.list[index].goods_list, index1, dd2)
      self.$set(self.content.list[index].goods_list, (index1 - 1), dd1)
    },
    // 获取模板信息
    getTplInfo() {
      const self = this
      getAction('/common/cmsFloor/queryById', { id: self.id ? self.id : '1' }).then(function (res) {
        self.tplInfo.title = res.result.title
        self.tplInfo.remark = res.result.remark
        self.tplInfo.content = res.result.content
        self.tplInfo.id = res.result.id
        const bList = JSON.parse(res.result.content)
        if (bList && bList.list) {
          for (let i = 0; i < bList.list.length; i++) {
            bList.list[i].active = false;
          }
          self.content = bList;
          console.log('list', bList.list && [bList.list[0]]);
          console.log('list_1', bList.list);
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    // 保存模板信息
    saveTplInfo() {
      const self = this
      for (let i = 0; i < self.content.list.length; i++) {
        let type = self.content.list[i].type;
        if (type == '2' || type == '4' || type == '5' || type == '6') {
          for (let j = 0; j < self.content.list[i].floor_data.length; j++) {
            if (self.content.list[i].floor_data[j].good_info.imgUrl == undefined) {
              if (self.content.list[i].floor_data[j].img_url == '') {
                console.log(self.content.list[i].floor_data[j]);
                // 图片判断
                this.$notification.warn({ message: "错误提示", description: "请上传图片", duration: 3 });
                return;
              }
              // 判断图层参数设置
              // if (self.content.list[i].floor_data[j].link_type.params_type != 0 && self.content.list[i].floor_data[j].param != '') {
              //   // this.$notification.warn({ message: "错误提示", description: "请传递必要参数", duration: 3 });
              //   // return;
              // }
            }
          }
        }
      }
      self.tplInfo.content = JSON.stringify(self.content)
      if (!self.tplInfo.content) {
        self.$message.info('保存成功！')
        return
      }
      putAction('/common/cmsFloor/edit', self.tplInfo).then(function (res) {
        self.$message.success('保存成功！')
      }).catch(function (error) {
        console.log(error)
      })
    },
    sureNmSelect(item, index1, index2) {
      // if (item.itemCode) {
      //   this.content.list[index1].floor_data[index2].good_info = item
      // }
      console.log(item)
      if (item.title) {
        this.content.list[index1].floor_data[index2].title = item.title
      }
    },
    getItemClass(index) {
      const remainder = index % 3;
      if (remainder === 0 || remainder === 1) {
        return 'half-width';
      }
      return 'full-width';
    }
  }

}
</script>
<style lang="less" scoped>
.index-tpl {
  background-color: #f0f2f5;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 30px;
  min-height: 900px;
  overflow: hidden;

  .f-tools {
    position: fixed;
    bottom: 0;
    top: 60px;
    right: 0px;
    width: 140px;
    background-color: #f7f7f7;
    z-index: 10;
    padding: 0px;
    box-sizing: border-box;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.4);
    height: 100%;
    overflow-y: auto;

    .tool-box {
      line-height: 36px;

      .tool-item {
        padding: 0 5px;
      }
    }
  }

  .tpl-column-header {
    position: absolute;
    top: 54px;
    left: 20px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 50px;
    text-align: center;
    //   background: #333333;
    display: flex;
    color: #fff;
    z-index: 3;
  }

  .bg-phone {
    position: absolute;
    top: 10px;
    left: 7px;
    width: 348px;
    height: 721px;
    background-image: url('../../../../assets/img/iphone.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }

  .bg-phone-right {
    position: absolute;
    top: 10px;
    left: 341px;
    width: 24px;
    height: 721px;
    background-image: url('../../../../assets/img/iphone-right.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 4;
  }

  .tpl-column {
    position: absolute;
    z-index: 3;
    top: 100px;
    left: 21px;
    width: 328px;
    height: 595px;
    padding-left: 16px;
    padding-right: 16px;
    overflow-y: scroll;
    // border: solid 1px #333333;
    // height: auto;
    background-color: #f0f0f0;

    // overflow: hidden;
    .tpl-column-content {
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100%;
      height: auto;
      overflow: hidden;
      min-height: 518px;
      display: flex;
      justify-content: flex-start;
      //flex-direction: column;
      align-items: center;
      flex-wrap: wrap;

      .outer-container{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .half-width {
        width: 50%;
      }

      .full-width {
        width: 100%;
      }
      .tpl-item {
        cursor: pointer;
        position: relative;
        min-height: 40px;
        height: auto;
        // background-color: #fff;
        text-align: left;
        line-height: 44px;
        box-sizing: border-box;
        margin-bottom: 14px;

        .tpl-nav-item-box {
          background-color: #fff;
          border-radius: 10px 10px 10px 10px;
          padding: 10px 16px 5px;
        }

        margin-bottom: 14px;
        width: 100%;
        //display: flex;
        //justify-content: flex-start;

        .tpl-nav-item-box {
          background-color: #fff;
          border-radius: 10px 10px 10px 10px;
          padding: 10px 16px 5px;
        }

        .tpl-item-box {
          display: block;
          box-sizing: border-box;
          width: 100%;
          .tpl-nav-box {
            flex-wrap: wrap;
            justify-content: flex-start;
            // gap: 10px;

            .item-nav-item {
              width: calc(20% - 10px);
              flex: initial !important;
              text-align: center;
              box-sizing: border-box;
              margin: 5px 0;
              margin: 6px;
              margin-top: 0;

              &:nth-child(5n + 1) {
                margin-left: 0;
              }

              &:nth-child(5n) {
                margin-right: 0;
              }

              .nav-title {
                font-size: 12px;
                color: #333;
                height: 18px;
                line-height: 18px;
                overflow: hidden;
                margin-top: 4px;
              }
            }
          }

          .tpl-nav-box {
            flex-wrap: wrap;
            justify-content: flex-start;
            // gap: 10px;

            .item-nav-item {
              width: calc(20% - 10px);
              flex: initial !important;
              text-align: center;
              box-sizing: border-box;
              margin: 5px 0;
              margin: 6px;
              margin-top: 0;

              &:nth-child(5n + 1) {
                margin-left: 0;
              }

              &:nth-child(5n) {
                margin-right: 0;
              }

              .nav-title {
                font-size: 12px;
                color: #333;
                height: 18px;
                line-height: 18px;
                overflow: hidden;
                margin-top: 4px;
              }
            }
          }

          .tpl-item-box1 {
            display: flex;
            box-sizing: border-box;

            .item-box-item {
              flex: 1;

              span {
                padding: 2px 10px;
                border-radius: 12px;
                background-color: rgba(0, 0, 0, 0.8);
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
                line-height: 1.4;
              }

              img {
                width: 100%;
                display: block;
              }

              .no-img {
                background-size: cover;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                width: 100%;
                border: 1px dashed rgb(110, 109, 108);
                text-align: center;
                // background-color: #7ac0e0;
                color: #999999;

                &.hot-goods {
                  height: 200px;
                  background-image: url('../../../../assets/screenshot/hot.png');
                }

                &.new-goods {
                  height: 200px;
                  background-image: url('../../../../assets/screenshot/new.png');
                }

                &.spike {
                  height: 240px;
                  background-image: url('../../../../assets/screenshot/spike.png');
                }

                &.spike1 {
                  height: 240px;
                  background-image: url('../../../../assets/screenshot/spike2.png');
                }

                &.spike2 {
                  height: 240px;
                  background-image: url('../../../../assets/screenshot/spike1.png');
                }

                &.spike3 {
                  height: 240px;
                  background-image: url('../../../../assets/screenshot/spike3.png');
                }

                &.notice {
                  height: 40px;
                  background-image: url('../../../../assets/screenshot/notice.png');
                }

                &.shop {
                  height: 250px;
                  background-image: url('../../../../assets/screenshot/shop.png');
                }

                &.vae {
                  height: 200px;
                  background-image: url('../../../../assets/screenshot/vae.png');
                }

                &.coupon {
                  height: 50px;
                  background-image: url('../../../../assets/screenshot/coupon.png');
                }
              }

              .item-box-item__mask {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.4);
                z-index: 10;
              }

              .search-bar {
                display: flex;
                line-height: 34px;
                padding: 5px 10px;

                .el-input--medium .el-input__inner {
                  border-radius: 18px;
                  opacity: 0.6;
                }
              }
            }
          }

          .tpl-item-box2 {
            overflow: hidden;
            box-sizing: border-box;
            background-color: #ffffff;
            padding: 5px;
            border:1px solid blue;

            .item-box-item {
              width: 20%;
              padding: 4px;
              text-align: center;
              float: left;

              img {
                width: 40px;
                height: 40px;
                margin: 0 auto;
                border-radius: 20px;
                display: block;
              }

              .c-text {
                line-height: 22px;
                color: #1f1f1e;
                text-align: center;
                font-weight: 300;
                font-size: 12px;
              }

              .no-img {
                width: 100%;
                line-height: 44px;
                border: 1px dashed rgb(110, 109, 108);
                text-align: center;
                // background-color: #7ac0e0;
                color: #999999;
              }

              .search-bar {
                display: flex;
                line-height: 34px;
                padding: 5px 10px;

                .el-input--medium .el-input__inner {
                  border-radius: 18px;
                  opacity: 0.6;
                }
              }
            }
          }
        }

        .box-tool {
          position: absolute;
          display: none;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 2px dashed #ff2d2d;
          z-index: 2000;

          .box-tool-panel {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            font-size: 12px;
            position: relative;

            .floor-del {
              position: absolute;
              text-align: center;
              bottom: 5px;
              right: 5px;
              width: 40px;
              height: 25px;
              box-sizing: border-box;
              line-height: 25px;
              background: rgba(255, 0, 0, 0.5);
              color: #fff;
            }

            .floor-edit {
              position: absolute;
              text-align: center;
              bottom: 5px;
              right: 5px;
              width: 40px;
              height: 25px;
              box-sizing: border-box;
              line-height: 25px;
              background: rgba(0, 0, 0, 0.4);
              color: #fff;
            }
          }
        }

        .f-block {
          display: block;
        }
      }

      .tpl-item:hover {
        .box-tool {
          display: block;
        }
      }
    }
  }

  .el-dialog__body {
    padding: 0 15px;
    border: solid 1px #f1f1f1;
    min-height: 500px;
  }
}

.panel-close {
  position: absolute;
  right: 5px;
  top: 5px;
}

.edit-row {
  position: absolute;
  left: 370px;
  top: 12px;
}

.edit-panel {
  width: 650px;
  background-color: #ffffff;
  padding: 10px;
  position: relative;
  cursor: pointer;

  .one-row {
    margin-bottom: 5px;
    display: flex;

    .row-col {
      flex: 1;
      display: flex;
      padding: 0 10px 0 0;
      line-height: 32px;

      .col-label {
        padding-right: 15px;
      }
    }
  }

  .two-row {
    padding: 0;
    min-height: 50px;
    max-height: 600px;
    overflow-y: auto;

    .two-row-item {
      border: solid 1px #dddddd;
      margin-bottom: 5px;
      position: relative;
      min-height: 110px;

      .item-btns {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        width: 40px;
        text-align: right;
        padding: 5px;
        box-sizing: border-box;
      }

      .item-content {
        display: flex;
        padding: 5px;

        // overflow: hidden;
        .img-box {
          width: 100px;
          height: 100px;
          margin-right: 10px;
        }

        .data-box {
          flex: 1;
          min-height: 80px;
        }
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon-floor {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar-floor {
  width: 100px;
  height: 100px;
  display: block;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
}

.el-carousel {
  width: 100%;
}

.el-carousel__item--card {
  width: 86%;
  left: -18%;
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}

.el-radio--mini.is-bordered {
  padding: 6px 3px 0 3px;
  border-radius: 3px;
  height: 28px;
}

.el-radio__label {
  padding-left: 3px;
}

.el-popover {
  padding: 3px;
  // z-index:3000 !important;
}

.el-popper {
  // z-index:3001 !important;
}
</style>
